<template>
<view>
	<view class="cu-list menu-avatar">
				<view class="cu-item arrow" @click="changeRoom">
					<view class="cu-avatar round lg" :style="'background-image:url('+room_info.community.logo+');'"></view>
					<view class="content">
						<view class="text-grey">{{(room_info.community && room_info.community.name) ? room_info.community.name :'请选择您的账单地址'}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
								 {{room_info.address?room_info.address:'请设置房号'}}
							</view> </view>
					</view>
					<view class="action" >
						<view class="text-grey text-xs"></view>
						<view class="cu-tag round bg-grey lg">更换</view>
					</view>
				</view>
				</view>
		
	<view class="errormsgDiv" v-if="toGetOutRoomId" @click="changeRoom">
		  <view class="errormsg" style="color: #0081FF;" >\（￣︶￣）/</view>
		  <view class="errormsg2" style="color: #0081FF;" >请选择您的帐单地址</view>
	</view>
  <view class="errormsgDiv" v-else-if="nodata">
    <view class="errormsg">\（￣︶￣）/</view>
    <view class="errormsg2">当前没有可缴费的账单</view>
  </view>
	<view v-else>
		<view class="cu-bar bg-white solid-bottom margin-top-20">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 待缴费账单
			</view>
			<!-- <view class="action" @click="viweHistore">
				 查看历史账单
			</view> -->
		</view>
		
			
			<view  class="cu-list menu" >
				<view class="cu-item " :key="index"  v-for="(item,index) in bills_list"     :data-index="index" >
						<view class="content padding-tb-sm">
							<view >
								 {{item.acct_period}} {{item.cost_type}}</view>
							<view class="text-gray text-sm">
								 {{item.release_day}}</view>
						</view>
						<view class="action">
 
								<view class="cu-form-group"> 
								    <view class="cu-tag round bg-orange light">￥{{item.bill_entry_amount}}</view>
									<text class="cuIcon-roundcheck margin-left-sm" :class="checkbox[index]?'text-green':'text-gray'"></text>
							    </view>
							 
					</view>
			 </view>
			</view>
			<view style="height: 120upx;"></view>
			<view  class="fixed-btn">
				<view class="selectAllBox">
					 <checkbox-group class="block" @click="selectAll"  >
						<view class="cu-form-group">
							<view class="title">缴费</view>
							<checkbox :class="selectAllcheckbox?'checked':''" :checked="selectAllcheckbox?true:''"  ></checkbox>
						</view>
					</checkbox-group>
				</view>
				<view class="postOrderBox">
					<button @click="postOrder('ModalPay')" class="cu-btn block bg-blue ">
					<text :class="loadding==1?'cuIcon-loading2 cuIconfont-spin':'cuIconfont-spin'"></text>支付 {{bill_amount}} 元</button>
		
				</view>
				<view class="clear"></view>
			</view>

	</view>
	<view class="cu-modal" :class="modalName == 'ModalPay' ? 'show' : ''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">确认缴费信息</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding-xl">
				
				<view class="text-xxl">
					<text class="text-red" style="font-size: 50upx;">￥{{ bill_amount }}</text>
				</view>
				
				<view class="padding" v-if="houses_info.short_name">
					<view>账单关联业主信息</view>
					<view class="text-xxl padding-xs">{{houses_info.short_name}}</view>
					<view class="text-xxl padding-xs" v-if="houses_info.short_phone">{{houses_info.short_phone}}</view>
						
				</view>
				
				
				<view class="padding-xl" >
					<button @click="postOrder" class="cu-btn block line-orange lg">
						<text class="cuIcon-videofill text-orange"></text>
						立即缴费
					</button>
				</view>
				</view>
		</view>
	</view>
 </view>
</template>


<script>
	import beeApp from '../../beeApp.js'
	export default {
		data() {
			return {
				  checkbox:{
					  
				  },
				  toGetOutRoomId:0,
				  loadding:0,
				  selectAllcheckbox:false,
				   user_info: {
                        community:{},
                        tenement_type:[]
                    },
					houses_info:{
					},
                    page: 1,
                    lastPage:0,
                    mounted: 0,
                    room_info: {
						community:{},
					},
					modalName: null,
                    showNoData:0,
                    bills_list:[],
                    bill_amount:"0.00",
                    out_room_id:'',
                    community_id:'',
                    nodata:0,
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		  },
		onLoad(option) {
				this.getopenid();
				this.out_room_id = option.out_room_id?option.out_room_id: uni.getStorageSync("out_room_id");
                this.community_id = option.community_id?option.community_id: uni.getStorageSync("community_id");
				if( !this.out_room_id  || !this.community_id ){
				   this.toGetOutRoomId=1;
				   return;
                }
				uni.setStorageSync("out_room_id",this.out_room_id);
				uni.setStorageSync("community_id",this.community_id);
				this.load();
               
		},
		onPullDownRefresh() {
			this.load(1);
			uni.stopPullDownRefresh();
		},
		onShow:function(){
			var reload = beeApp.getPageData("pages/bills/bills","reload");
			if(reload==1){
				this.out_room_id =  uni.getStorageSync("out_room_id");
                this.community_id = uni.getStorageSync("community_id");
				beeApp.setPageData("pages/bills/bills",{reload:0});
				if(this.out_room_id && this.community_id){
					this.toGetOutRoomId=0;
				}
				this.load(1);
			}
			// beeApp.getUserInfo("",function(){
			// 	uni.showModal({
			// 	    title: '提示',
			// 	    content: '请先登录后再进行缴费',
			// 	    success: function (res) {
			// 	        if (res.confirm) {
			// 	            beeApp.data.loginBack=1;
			// 				uni.navigateTo({
			// 				  'url':'/pages/user/bindphone?page=auth'
			// 				})
			// 	        } else if (res.cancel) {
			// 	            console.log('用户点击取消');
			// 	        }
			// 	    }
			// 	});
			// });
		},
		
		methods: {
			   
			    load:function(reload=0){
					this.getopenid();
					this.bill_amount = 0;
					this.selectAllcheckbox=false;
					this.getRoomInfo(reload);
					this.getUserInfo(reload);
					this.getBillList(reload);
					this.getHouserInfo();
					
				},
				 
				hideModal(e) {
					this.modalName = null;
				},
				changeRoom:function(){
					uni.navigateTo({
							  url:'/pages/bills/getOutRoomId'
					 })
				},
				viweHistore:function(){
					uni.navigateTo({
							  url:'/pages/bills/billsRecords'
					 })
				},
				getUserInfo:function(){
                    var that = this;
                    beeApp.api("/api/user/info",{
                        community_id:this.community_id,
                        fields:"user_id,store_id,phone,nickname,phone,avatarUrl,last_update_time,community"
                    },function(res){
                         if(res.code==200){
                             that.user_info = res.data;
                              
                         }
                        
                    });
                },
				getHouserInfo:function(){
					var out_room_id = this.out_room_id;
					var that = this;
					 beeApp.api("/api/community_houses/find",{
					   community_id:this.community_id,
					   out_room_id:out_room_id,
					   fields:"out_room_id,short_phone,short_name",		  
					  },function(res){
					      if(res.code!=200){
					           // beeApp.alert(res.msg);
					           return ;
					      }
					      that.houses_info = res.data;
					     
					 });
				},
                getRoomInfo:function(){
                   var out_room_id = this.out_room_id;

                   var that = this;
                    beeApp.api("/api/community_rooms/find",{
                      community_id:this.community_id,
                      out_room_id:out_room_id,
					  
                     },function(res){
                         if(res.code!=200){
                              // beeApp.alert(res.msg);
                              return ;
                         }
                         that.room_info = res.data;
                        
                    });

                },
                getBillList:function(reload=0){
                   var out_room_id = this.out_room_id;
                   var that = this;
				   if(reload==1){
					    this.bills_list=[];
					    this.nodata=0;
						this.loadding=0;
						this.checkbox={};
				   }
                   beeApp.api("/api/community_bills/get",{
                      community_id:this.community_id,
                      out_room_id:out_room_id,
                      status:0,
					  type:'HOA_fee',
                     },function(res){
						 if(res.code==9999 || res.code==9998 ){
							 uni.showModal({
							     title: '提示',
							     content: res.msg,
								 cancelText:'取消',
								 confirmText:res.code==9999?'绑定手机':'更换手机',
							     success: function (res) {
							         if (res.confirm) {
										beeApp.setPageData("pages/bills/bills",{reload:1});
							            // #ifdef H5
										uni.navigateTo({
							            	url:'/pages/user/bindphone?back=1'
							            })
										return
										// #endif
										uni.navigateTo({
											url:'/pages/user/wxbindphone?back=1'
										})
							         } else if (res.cancel) {
							             
							         }
							     }
							 });
							 return;
							 
						 }else if(res.code!=200){
                             beeApp.alert(res.msg);
                         }
                         that.bills_list = res.data.list;
                         if (that.bills_list.length === 0) {
                            that.nodata=1;
                         }else{
							 that.nodata=0;
						 }
						 // that.selectAll();
                    });
                },
                countPrice:function(e){
                  var bill_amount=0;
				  console.log(e);
				  // var bill_entry_amount = e.currentTarget.bill_entry_amount;
				  var index = e.currentTarget.dataset.index;
				  var checkbox = this.checkbox;
				  // checkbox[index] =  checkbox[index] ? false : true;
				  checkbox[index] = true;
				  this.checkbox={};
				  this.checkbox = checkbox;  
				  for(var i in checkbox){
					   if(checkbox[i]){
						   bill_amount+=Number(this.bills_list[i].bill_entry_amount);
					   }
					   
				  }
                  this.bill_amount = bill_amount.toFixed(2);

                },
                selectAll:function(){
				  this.selectAllcheckbox = !this.selectAllcheckbox;
				  var checkbox={};
				  var bill_amount = 0;
				  if(this.selectAllcheckbox){
					  for(var i in this.bills_list){
					   checkbox[i]=1;
						bill_amount+=Number(this.bills_list[i].bill_entry_amount);
					}
				  }
                  
				  this.checkbox = checkbox;  
                  this.bill_amount = bill_amount.toFixed(2);
                },
				getopenid(){
					var openid =  uni.getStorageSync("openid");
					if(openid ){
						this.openid =openid;
						return;
					} 
					var that = this;
					wx.login({
					  success (res) {
						  console.log("res:",res);
					    if (res.code) {
						  
						   beeApp.api("/api/user/getOpendId",{
							    code:res.code
						   },(resD)=>{
								console.log(resD);
								if(resD.code!=200){
									 beeApp.alert('获取openId失败, 请下拉刷新重试' );
									 return;
								}
								that.openid = resD.data.openid;
								uni.setStorageSync("openid",resD.data.openid);
						   })
					    } else {
					      beeApp.alert('登录失败！' + res.errMsg)
					    }
					  }
					})
				},
				 
                postOrder:function(type){
					
                  var bill_entry_ids=[];
            
				  if(this.loadding==1){
					  return;
				  }
					var that = this;
					
					 
				  for(var i in  this.checkbox){
					   if(this.checkbox[i]){
					    bill_entry_ids.push(this.bills_list[i].bill_entry_id);
					   }
				  }
				  // console.log("bill_entry_ids",bill_entry_ids,this.bills_list);
                  if(bill_entry_ids.length===0){
					  beeApp.alert("请选择账单");
					  this.loadding=0;
                    return ;
                  }
				  if(type=="ModalPay"){
					  this.modalName = "ModalPay";
					  return;
				  }
				  
				  this.loadding=1;
				  var userInfo =  uni.getStorageSync("user_info");
				  // var shop_id =  uni.getStorageSync("shop_id");
                  beeApp.api("/api/pay/community_bills_order",{
                      bill_entry_id:bill_entry_ids.join(","),
					  openid:this.openid,
					  shop_id:this.community_id,
					  method:"POST",
                  },function(res){
					  
                      if(res.code!=200){
						 that.loadding=0;
                        beeApp.alert(res.msg);
						that.modalName =null;
                        return;
                      }
                      beeApp.pay(res.data.order_sn,(res)=>{
						  that.loadding=0;
						  // uni.navigateTo({
						  // 	url: '/pages/bills/billsRecords'
						  // });
						  that.getBillList(1);
						  uni.showModal({
								title: '支付成功',
								content: '恭喜您，缴费成功！'
							});
							that.modalName =null;
							
							
						  // beeApp.setPageData("pages/bills/bills",{reload:1});
					  },(res)=>{
						  that.modalName =null;
						  that.loadding=0;
					  });
                  });
                  // console.log(bill_entry_ids);
                },
             
                setData:function(data){
                     for(var i in data){
                        this[i]=data[i];
                     }
                  },
		}
	}
</script>


<style>
	.selectAllBox{ float: left; width: 230upx;}
	.selectAllBox .cu-form-group{ margin-top: 10upx;}
	.selectAllBox .cu-form-group .title {padding-right:0}
	.postOrderBox{ float: right; min-width: 500upx;}
	/* .postOrderBox{ width: 100%;} */
	.fixed-btn{ background: #fff;}
	.postOrderBox button{ border-radius: 0;height: 120upx; font-size: 40upx;}
	.cu-list.menu>.cu-item{ padding-right: 0px;}
</style>
